<template>
	<div>
		<van-nav-bar
			safe-area-inset-top
			border
			z-index="9"
			:fixed="fixed"
			:title="title"
			@click-left="$emit('back')"
			@click-right="$emit('rightBtn')"
			placeholder
		>
			<template #right>
				<span v-if="rightText" @click="$emit('rightClick')" class="text" :style="{ color: rightTextColor }">
					{{ rightText }}
				</span>
				<span v-if="isRightIcon" @click="$emit('rightClick')">
					<img class="rightIcon" :src="customRightUrl" alt="" />
				</span>
			</template>
			<template #left>
				<van-icon v-if="isLeftIcon" name="arrow-left" size="18" />
				<span v-if="leftText" class="text" :style="{ color: leftTextColor }">{{
					leftText
				}}</span>
			</template>
		</van-nav-bar>
	</div>
</template>

<script>
import { NavBar } from 'vant';
// 顶部navbar组件 支持自定义左右侧插槽和标题
export default {
	name: 'commonNavBar',
	components: {
		'van-nav-bar':NavBar
	},
	props: {
		fixed: {
			type: Boolean,
			default: true
		},
		title: {
			type: String,
			default: ''
		},
		leftText: {
			type: String,
			default: ''
		},
		rightText: {
			type: String,
			default: ''
		},
		isLeftIcon: {
			type: Boolean,
			default: true,
			require: false
		},
		isRightIcon: {
			type: Boolean,
			default: false,
			require: false
		},
		rightTextColor: {
			type: String,
			default: ''
		},
		leftTextColor: {
			type: String,
			default: ''
		},
		customRightUrl: {
			type: String,
			default: require('../assets/img-common/change.png')
		}
	},
	data() {
		return {}
	},
	methods: {}
}
</script>
<style lang="less" scoped>
.text {
	font-size: 28px;
}
/deep/ .van-nav-bar__title {
	font-size: 30px;
	font-weight: bold;
}
/deep/.van-nav-bar .van-icon {
	font-size: 34px !important;
	color: #061226;
}
/deep/ .van-nav-bar__placeholder {
	// background-color: #00000000;
	height: 100px !important;
}
// /deep/ .van-nav-bar {
//   background-color: #00000000;
// }
/deep/ .van-nav-bar__content {
	height: 100px !important;
	font-size: 30px !important;
}
// /deep/ .van-nav-bar--fixed {
// 	top: 40px;
// }
.rightIcon {
	width: 30px;
	height: 30px;
}
</style>
